<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#fruit li").bind({
					mouseover:function(){
						$(this).css({"font-size":"50px","color":"red"});
					},
					mouseout:function(){
						$(this).css({"font-size":"14px","color":"black"});
					},
					click:function(){
						alert(this.innerHTML);
					}
				});
				$("#btn").click(function(){
					$("#fruit li").unbind("click");
				});
				$("#btn2").click(function(){
					var n=window.prompt("请输入水果名称：");
					if(n==null)
						return;
					
					//var newli=$("<li></li>");
					//newli.text(n);
					//aa.append(newli)
					$("#fruit").append("<li>"+n+"</li>");	
				});
			});
		</script>
	</head>
	<body>
		<ul id="fruit">
			<li>葡萄</li>
			<li>香蕉</li>
			<li>柠檬</li>
			<li>柿子</li>
			<li class="bo">菠萝</li>
			<li>桃子</li>
			<li>苹果</li>
			<li>西瓜</li>
			<li></li>
		</ul>
		<input type="button" value="去掉click时间" id="btn"/>
		<input type="button" value="添加新品种" id="btn2"/>
	</body>
</html>
